<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <com-a></com-a>
    <com-b></com-b>
  </div>
  <script>

    var bus = new Vue();

    var coma = {
      template: `<div>com-a <com-c></com-c></div>`,
      components: {
        'com-c': {
          // inject:['msg'],
          // template: '<div>com-c-{{msg}}</div>',
          template: '<div>com-c</div>',
          mounted() {
            console.log(this.$root.msg)
            //根组件
            this.$root.sayHello('xiaoming')
            //父组件
            // this.$parent;
            bus.$on('msg', (msg) => {
              console.log(msg)
            })
          }
        }
      }
    };

    var comb = {
      inject: ['msg'],
      template: `<div>com-b-{{msg}}</div>`
    };

    var vm = new Vue({
      el: "#app",
      data: {
        msg: "2002"
      },
      methods: {
        sayHello(name) {
          console.log('你好：' + name)
        }
      },
      provide() {
        return {
          msg: this.msg
        }
      },
      components: {
        'com-a': coma,
        'com-b': comb
      },
      mounted() {
        setTimeout(() => {
          bus.$emit('msg', '太原2002')
        }, 3000)
      }
    })
  </script>
</body>

</html>